<template>
  <div>
    <div class="home">
      <!-- 搜索框 -->
      <van-search
        placeholder="请输入关键词"
        disabled
        shape="round"
        @click="push"
      />
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#66c6f2">
        <van-swipe-item v-for="item in banner" :key="item.id">
          <img
            :src="item.image_url"
            alt=""
            width="100%"
            :style="{ display: 'block' }"
          />
        </van-swipe-item>
      </van-swipe>

      <van-grid :column-num="channel.length">
        <van-grid-item
          :icon="item.icon_url"
          :text="item.name"
          v-for="(item, index) in channel"
          :key="item.id"
          @click="tocategoryTabLan(item.id, index)"
        />
      </van-grid>

      <div class="pinPai">
        <h3>品牌制造商直供</h3>
        <ul>
          <li
            v-for="item in brandList"
            :key="item.id"
            @click="toPinPaiZhiZao(item.id)"
          >
            <img v-lazy="item.pic_url" alt="" />
            <h4>{{ item.name }}</h4>
            <p>{{ item.floor_price | RMBformat }}</p>
          </li>
        </ul>
      </div>

      <div class="xinPinTuiJian">
        <h3>周一周四 · 新品首发</h3>
        <Products :goodsList="newGoodsList"></Products>
      </div>

      <div class="renQiTuiJian">
        <h3>人气推荐</h3>
        <ul>
          <li
            v-for="item in hotGoodsList"
            :key="item.id"
            @click="toPruductDetail(item.id)"
          >
            <img v-lazy="item.list_pic_url" alt="" />
            <div>
              <h4>{{ item.name }}</h4>
              <h5>{{ item.goods_brief }}</h5>
              <p>{{ item.retail_price | RMBformat }}</p>
            </div>
          </li>
        </ul>
      </div>

      <div class="zhuanTiJinXuan">
        <h3>专题精选</h3>
        <van-swipe :loop="false" :width="300" :show-indicators="false">
          <van-swipe-item v-for="item in topicList" :key="item.id">
            <img
              v-lazy="item.scene_pic_url"
              alt=""
              width="100%"
              height="200px"
            />
            <h4>{{ item.title }}</h4>
            <p class="van-ellipsis">{{ item.subtitle }}</p>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- <transition name="van-fade">
      <div class="popup-shadow" v-show="$store.state.isShadwo"></div>
    </transition> -->

    <transition name="slide">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { getHomeList, getCategory } from "@/request/api.js";
import Products from "@/components/Products.vue";
export default {
  name: "Home",
  components: {
    Products,
  },
  data() {
    return {
      showHome: true,
      // 轮播图
      banner: [],
      // 品牌制造商直供
      brandList: [],
      // 图标导航
      channel: [],
      // 新品推荐
      newGoodsList: [],
      // 人气推荐
      hotGoodsList: [],
      //专题精选
      topicList: [],
    };
  },
  async created() {
    const res = await getHomeList();
    if (res.errno == 0) {
      let {
        banner,
        channel,
        brandList,
        newGoodsList,
        hotGoodsList,
        topicList,
      } = res.data;
      this.banner = banner;
      this.channel = channel;
      this.brandList = brandList;
      this.newGoodsList = newGoodsList;
      this.hotGoodsList = hotGoodsList;
      this.topicList = topicList;
    }
  },
  methods: {
    push() {
      this.$router.push("/SearchPopup");
      this.$store.commit("changeIsShadwo", true);
      this.showHome = false;
    },
    toPruductDetail(id) {
      this.$router.push("/PruductDetail?id=" + id);
    },
    toPinPaiZhiZao(id) {
      this.$router.push("/pinPaiZhiZao?id=" + id);
    },
    tocategoryTabLan(id, index) {
      // console.log(index);
      this.$router.push(`/categoryTabLan?id=${id}&index=${index}`);
    },
  },
  // 路由离开 - 触发(保存滚动位置)
  beforeRouteLeave(to, from, next) {
    from.meta.scrollTop = window.scrollY
    next();
  },
};
</script>

<style lang="less" scoped>
.home {
  padding-bottom: 0.7rem;
}

.slide-enter,
.slide-leave-to {
  right: -100%;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s;
}

.slide-enter-to,
.slide-leave {
  right: 0;
}

.popup-shadow {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 98;
}

.pinPai {
  margin-top: 0.2rem;
  text-align: center;
  background: #fff;
  h3 {
    font-size: 0.2rem;
    padding: 0.2rem;
  }
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      position: relative;
      width: 49%;
      background: #fff;
      padding-bottom: 0.05rem;
      img {
        width: 100%;
      }
      h4 {
        position: absolute;
        top: 0.1rem;
        left: 0.1rem;
      }
      p {
        position: absolute;
        top: 0.5rem;
        left: 0.1rem;
        color: darkred;
      }
    }
  }
}

.xinPinTuiJian {
  margin-top: 0.2rem;
  text-align: center;
  h3 {
    background-color: #fff;
    font-size: 0.2rem;
    padding: 0.2rem;
  }
}
.renQiTuiJian {
  background-color: #fff;
  margin-top: 0.2rem;

  h3 {
    font-size: 0.2rem;
    padding: 0.2rem;
    text-align: center;
  }

  ul {
    li {
      background-color: #fafafa;
      margin-bottom: 0.1rem;
      position: relative;
      img {
        width: 30%;
        display: flex;
      }
      div {
        position: absolute;
        top: 0.15rem;
        left: 1.2rem;
        line-height: 2;
        h4 {
          font-size: 0.17rem;
        }
        h5 {
          font-size: 0.15rem;
        }
        p {
          font-size: 0.14rem;
          color: darkred;
        }
      }
    }
  }
}
.zhuanTiJinXuan {
  margin-top: 0.2rem;
  background-color: #fff;
  text-align: center;
  .van-swipe-item {
    line-height: 2;
    padding-left: 0.1rem;
    padding-bottom: 0.1rem;
    h4 {
      font-size: 0.16rem;
    }
    p {
      font-size: 0.14rem;
    }
  }
  h3 {
    font-size: 0.2rem;
    padding: 0.2rem;
  }
}
</style>
